<template>
  <div class="title">
    <span>批阅列表</span>
  </div>
  <el-divider />
  <div class="user-list">
    <div v-for="(evaluation, index) in evaluationList" :id="evaluation.recordId" :key="index" :class="{ check: evaluation.recordId === recordId }" class="user-detail">
      <span style="cursor: pointer" @click="handle(evaluation)">
        <el-avatar :src="evaluation.userHead" :size="30" />
        {{ evaluation.nickname }}
      </span>
      <enum-view class="status" :enum-name="'ExamStatus'" :enum-value="evaluation.examStatus" />
    </div>
  </div>
  <div class="foot">
    <el-button v-loading="loading" plain type="primary" @click="handleNext(-1)">上一份</el-button>
    <el-button v-loading="loading" plain type="primary" @click="handleNext(1)">下一份</el-button>
  </div>
</template>
<script setup>
  import { toRefs } from 'vue'
  import EnumView from '@/components/Enum/View/index.vue'

  const props = defineProps({
    evaluationList: { type: Array, default: () => [] },
    recordId: { type: String, default: '' },
    loading: { type: Boolean, default: false }
  })

  const { recordId, evaluationList, loading } = toRefs(props)

  // 点击选中
  const handle = (evaluation) => {
    const element = document.getElementById(evaluation.recordId)
    element.scrollIntoView({ behavior: 'smooth' })
    emit('callback', evaluation.recordId)
  }

  // 点击按钮
  const emit = defineEmits(['callback'])
  const handleNext = async (index) => {
    const evaluation = evaluationList.value.find((item) => item.recordId === recordId.value)
    const nextEvaluation = evaluationList.value[evaluationList.value.indexOf(evaluation) + index]
    if (nextEvaluation) {
      const element = document.getElementById(nextEvaluation.recordId)
      element.scrollIntoView({ behavior: 'smooth' })
      await emit('callback', nextEvaluation.recordId)
    }
  }
</script>
<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
  }

  .user-list {
    height: calc(100vh - 320px);
    overflow: auto;

    .user-detail {
      display: flex;
      justify-content: space-between;
      line-height: 50px;
      font-size: 14px;
      padding: 0 10px;
      overflow: auto;

      .status {
        font-size: 12px;
        color: #777;
      }
    }
  }

  .foot {
    text-align: center;
    padding-top: 10px;
  }

  .check {
    background: rgba(61, 127, 255, 0.06);
    border-radius: 5px;
  }
</style>
